<template>
	<view class="pageview">
		<cl-navbar leftIconSize="40rpx" autoBack :bgColor="isNavBg?'#ededed':'transparent'" :isbgColor="isNavBg">
		</cl-navbar>
		<scroll-view scroll-y @scroll="onScroll" class="pageContent">
			<view class="lunboview">
				<u-swiper :list="getswiper" indicator indicatorMode="dot" :interval='5000' :height="swiperHeight" radius="0"></u-swiper>
			</view>
			<view class="introduce">
				<text class="introduce_tag">{{detailsInfo.cate_name}}</text>
				<text class="introduce_tag2">{{detailsInfo.cate_name}}</text>
				<text>{{detailsInfo.product_name}}</text>
			</view>
			<view class="tagView" v-if="detailsInfo.custom_tags && detailsInfo.custom_tags.length">
				<view class="tagView__tags">
					<view class="tagView__tags__item" v-for="(item,index) in detailsInfo.custom_tags">{{item}}</view>
				</view>
			</view>
			<view class="serviceView" v-if="detailsInfo.product_service_info">
				<text class="serviceView__title">{{$t("astral.details.service")}}</text>
				<view class="serviceView__details" @click="fuwuclick">
					<view class="serviceView__details__view">
						<view class="serviceView__details__view__item"
							v-for="(item,index) in detailsInfo.product_service_info.service_content">
							<image src="/static/icon/select.svg" class="serviceView__details__view__item__img"></image>
							<text class="serviceView__details__view__item__text">{{item}}</text>
						</view>
					</view>
					<u-icon name="arrow-right" color="#B2B2B2"></u-icon>
				</view>
			</view>
			<view class="taolu"
				v-if="detailsInfo.product_service_info && detailsInfo.product_service_info.service_field1">
				{{detailsInfo.product_service_info.service_field1}}
			</view>
			<!-- 推荐 -->
			<view class="recomView">
				<view class="recomView__top">
					<text class="recomView__top__title">{{$t("astral.details.recommend")}}</text>
					<text class="recomView__top__switch"
						@click="getRecommend()">{{recommendLoading?$t("astral.details.recommendingForYou"):$t("astral.details.refresh")}}</text>
				</view>
				<view class="recomView__content">
					<view class="recomView__content__item" v-for="(item,index) in recommends" :key="item.id"
						@click="recommendClick(item)">
						<cl-stars-image :srckey="item.cover_url" v-if="!item.cover_video_url"
							imageStyle="width: 210rpx;height: 210rpx;border-radius: 10rpx;"></cl-stars-image>
						<cl-stars-video :srckey="item.cover_video_url" v-else autoplay
							videoStyle="width: 210rpx;height: 210rpx;border-radius: 10rpx;"></cl-stars-video>
						<text class="recomView__content__item__name u-line-1">{{item.product_name}}</text>
					</view>
				</view>
			</view>
			<!-- //评价 -->
			<view class="commentView">
				<view class="commentView__top">
					<text
						class="commentView__top__titie">{{$tc("astral.details.stars_products_comments_count",detailsInfo.stars_products_comments_count || 0)}}</text>
					<view style="display: flex;align-items: center;" @click="goReview">
						<text class="commentView__top__good"
							style="margin-right: 5rpx;">{{$tc("astral.details.favorable_rate",detailsInfo.favorable_rate || 0)}}</text>
						<u-icon name="arrow-right" color="#595A66" size="14px"></u-icon>
					</view>

				</view>
				<view class="commentView__content">
					<view class="commentView__content__item"
						v-for="(item,index) in detailsInfo.stars_products_comments">
						<view class="commentView__content__item__top" v-if="item.user_info">
							<cl-avatar :src="item.user_info.avatar_url" size="70rpx"></cl-avatar>
							<view class="commentView__content__item__top__right">
								<text
									class="commentView__content__item__top__right__name">{{maskString(item.user_info.nick_name)}}</text>
								<view style="display: flex;align-items: center;">
									<u-rate :value="item.rating" readonly activeColor="#F7797D" size="12"></u-rate>
									<span
										style="margin-left: 20rpx;font-size: 20rpx;color: #595A66;">{{item.attr_name}}</span>
								</view>
							</view>
						</view>
						<view class="commentView__content__item__details">
							{{item.comments}}
						</view>
						<view class="commentView__content__item__medium">
							<u-album :urls="getAlbuma(item)" singleSize="210" multipleSize="210rpx"
								space="10rpx"></u-album>
						</view>
					</view>
				</view>
			</view>
			<view class="shibajin"
				v-if="detailsInfo.product_service_info && detailsInfo.product_service_info.service_field2">
				{{detailsInfo.product_service_info.service_field2}}
			</view>
			<view class="placeholder">

			</view>

			<view class="customerview">
				<view class="iconView">
					<u-icon class="iconView__icon" slot="inactive-icon" name="edit-pen" size="48rpx" color="#fff"
						:label="$t('astral.index.evaluation')" labelPos="bottom" labelSize="24rpx" space="2px" label-color="#fff"
						@click="pinglun"></u-icon>
					<u-icon class="iconView__icon" slot="inactive-icon"
						:name="detailsInfo.is_liked?'heart-fill':'heart'" size="48rpx"
						:color="detailsInfo.is_liked?'#930301':'#fff'" :label="$t('astral.details.giveLike')" labelPos="bottom" labelSize="24rpx"
						space="2px" label-color="#fff" @click="dianzan"></u-icon>
					<u-icon class="iconView__icon" slot="inactive-icon"
						:name="detailsInfo.is_recommend?'thumb-up-fill':'thumb-up'" size="48rpx"
						:color="detailsInfo.is_recommend?'#930301':'#fff'" :label="$t('astral.details.recommended')" labelPos="bottom"
						labelSize="24rpx" space="2px" label-color="#fff" @click="tuijian"></u-icon>
				</view>
				<view class="lianxikefu" @click="gokefu">
					<u-icon name="kefu-ermai" size="50rpx" style="margin-right: 15rpx;" color="#fff"></u-icon>
					{{$t("astral.details.contactService")}}
				</view>

			</view>
		</scroll-view>
		<view>
			<cl-model ref="clmodel"></cl-model>
		</view>
		<view v-if="detailsInfo.product_service_info">
			<u-popup :show="fuwushow" @close="fuwushow = false" bgColor="#ffffff" round='20rpx' closeable>
				<scroll-view scroll-y="true" style="max-height: 80vh;">
					<u-parse :content="detailsInfo.product_service_info.service_description" @linkTap="linkTap" :isHref="false" style="padding: 30rpx;"></u-parse>
				</scroll-view>
				<!-- <uParse :content="strings" @preview="preview" @navigate="navigate" /> -->
				
				<!-- <view class="" @click="aurl.handleClick">
					<view v-html="detailsInfo.product_service_info.service_description" ></view>
				</view> -->
			</u-popup>
		</view>
	</view>
</template>
<script>
	import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'astraldetails',
		data() {
			return {
				fuwushow: false,
				id: 0,
				recommends: [],
				recommendLoading: false,
				detailsInfo: {},
				swiperHeight: uni.$u.getPx('720rpx'),
				isNavBg: false,
				statusBarHeight: uni.$u.sys().statusBarHeight
			}
		},
		onLoad() {
			let {
				id
			} = this.$Route.query
			this.id = id
			this.getDetail()
			this.getRecommend()
		},
		computed: {
			...mapState({
				mykefu: state => state.friends.mykefu,
			}),
			getswiper() {
				return this.detailsInfo.stars_products_images && this.detailsInfo.stars_products_images.map(item => item.image_url) || []
			},
			getAlbuma() {
				return (item) => {
					return item.stars_product_comment_images && item.stars_product_comment_images.map(item => {
						return {
							src:item.thumb_url,
							videoSrc:item.image_url,
							image_type:item.image_type
						}
					}) || []
				}
			}
		},
		onShow() {},
		methods: {
			maskString(str) {
			    if (str.length === 2) {
			        // 如果字符串长度为2，将第二位替换为 "*"
			        return str[0] + '*';
			    } else if (str.length > 2) {
			        // 如果字符串长度大于2，保留第一位和最后一位，其余用 "*" 替换
			        let firstChar = str.charAt(0);
			        let lastChar = str.charAt(str.length - 1);
			        let middleStars = '*'.repeat(str.length - 2);
			        return firstChar + middleStars + lastChar;
			    } else {
			        // 如果字符串长度小于等于1，直接返回原字符串
			        return str;
			    }
			},
			linkTap(e){
				getApp().openGlobalModal(e.href,'')
				return
				plus.webview.prefetchURL(e.href);
				this.$Router.push({
					name:'chum_website',
					params: {
						url:e.href,
					},
					animation:{
						animationType:'slide-in-bottom'
					}
				})
			},
			pinglun() {
				this.$refs.clmodel.show({
					title: this.$t("common.Tips"),
					content: this.$t("astral.details.tipContactCustomerService"),
					confirm: (e) => {
						e.showModel = false
						this.gokefu()
					}
				})
			},
			dianzan() {
				if (this.detailsInfo.is_liked == '0') {
					this.$api.common.starsProductsAdd({
						product_id: this.detailsInfo.id,
						function_type: 0
					}).then(res => {
						if (res) {
							this.detailsInfo.is_liked = res.data.id
						}
					})
				} else {
					this.$api.common.starsProductsDel({
						product_id: this.detailsInfo.id,
						operate_id: this.detailsInfo.is_liked
					}).then(res => {
						if (res) {
							this.detailsInfo.is_liked = 0
						}
					})
				}

			},
			tuijian() {
				if (this.detailsInfo.is_recommend == '0') {
					this.$api.common.starsProductsAdd({
						product_id: this.detailsInfo.id,
						function_type: 1
					}).then(res => {
						if (res) {
							this.detailsInfo.is_recommend = res.data.id
						}
					})
				} else {
					this.$api.common.starsProductsDel({
						product_id: this.detailsInfo.id,
						operate_id: this.detailsInfo.is_recommend
					}).then(res => {
						if (res) {
							this.detailsInfo.is_recommend = 0
						}
					})
				}
			},
			recommendClick(item) {
				this.$Router.push({
					name: 'astraldetails',
					params: {
						id: item.id
					}
				})
			},
			fuwuclick() {
				if (this.detailsInfo.product_service_info) this.fuwushow = true
			},
			onScroll(e) {
				if (this.statusBarHeight + 44 + e.detail.scrollTop >= this.swiperHeight) {
					this.isNavBg = true
				} else {
					this.isNavBg = false
				}
			},
			isNetworkUrl(url) {
			    const pattern = /^(http|https|ftp):\/\//i;
			    return pattern.test(url);
			},
			async getDetail() {
				try {
					let apires = await this.$api.common.starsProductsInfo({
						product_id: this.id
					})
					if (apires) {
						this.detailsInfo = apires.data
						for (let index in this.detailsInfo.stars_products_images) {
							let item = this.detailsInfo.stars_products_images[index]
							try {
								const cachedMedia = await mediaCache.loadMedia(item.image_url, 'stars', 'image');
								if(this.isNetworkUrl(cachedMedia) || item.image_type == '0'){
									this.detailsInfo.stars_products_images[index].image_url = cachedMedia
								}else{
									 // 使用plus.io的resolveLocalFileSystemURL方法获取文件的绝对路径
									 plus.io.resolveLocalFileSystemURL(cachedMedia, (entry) => {
										 this.detailsInfo.stars_products_images[index].image_url = entry.toLocalURL()
									 }, function(e) {});
								}
								// this.detailsInfo.stars_products_images[index].image_url = cachedMedia;
							} catch (error) {
								this.detailsInfo.stars_products_images[index].image_url = '/static/logo.png'
							}
						}
						for (let index in this.detailsInfo.stars_products_comments) {
							let item = this.detailsInfo.stars_products_comments[index]
							for (let index_two in item.stars_product_comment_images) {
								let item_two = item.stars_product_comment_images[index_two]
								try {
									const cachedMedia = await mediaCache.loadMedia(item_two.thumb_url, 'stars',
										'image');
									this.detailsInfo.stars_products_comments[index].stars_product_comment_images[index_two].thumb_url = cachedMedia;
								} catch (error) {
									this.detailsInfo.stars_products_comments[index].stars_product_comment_images[index_two].thumb_url = '/static/logo.png'
								}
							}
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			goReview() {
				this.$Router.push({
					name: 'astralreview',
					params: {
						product_id: this.id,
					}
				});
			},
			gokefu() {
				if (this.mykefu) {
					this.$Router.push({
						name: 'chatMsg',
						params: {
							friend_idx: this.mykefu.user_id,
							nick_name: this.mykefu.nick_name,
							avatar_url: this.mykefu.avatar_url,
						}
					});
				} else {
					uni.showToast({
						title: this.$t("astral.details.noContact"),
						icon: 'none'
					})
				}
			},
			async getRecommend() {
				if (this.recommendLoading) return
				this.recommendLoading = true
				try {
					let apires = await this.$api.common.starsProductsRecommend({
						page: 1,
						limit: 6,
						product_id: this.id
					})
					if (apires) {
						this.recommends = apires.data.list
					}
				} catch (e) {
					//TODO handle the exception
				}
				this.recommendLoading = false
			}
		},
	};
</script>

<style scoped lang="scss">
	.lunboview {
		position: relative;

		&__voice {
			position: absolute;
			bottom: 50rpx;
			right: 40rpx;
			width: 190rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&__time {
				background-image: linear-gradient(180deg,
						rgba(255, 255, 255, 1) 0,
						rgba(229, 189, 132, 1) 100%);
				overflow-wrap: break-word;
				font-size: 24rpx;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.introduce {
		font-size: 36rpx;
		color: #ffffff;
		margin: 40rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		line-height: 1.3;
		position: relative;
	}

	.introduce_tag {
		background: #FF605F;
		border-radius: 10rpx;
		padding: 0 10rpx;
		font-size: 20rpx;
		margin-right: 10rpx;
		opacity: 0;
		line-height: 2;
		display: inline-block;
	}

	.introduce_tag2 {
		position: absolute;
		top: 5rpx;
		left: 0;
		background: #FF605F;
		border-radius: 10rpx;
		padding: 0 10rpx;
		font-size: 20rpx;
		line-height: 2;
		display: inline-block;
	}

	.tagView {
		margin: 0 30rpx 0 30rpx;
		box-sizing: border-box;

		&__tags {
			display: flex;
			gap: 20rpx;
			flex-wrap: wrap;

			&__item {
				padding: 0 20rpx;
				background: #ffffff;
				border-radius: 10rpx;
				height: 46rpx;
				line-height: 46rpx;
				font-size: 24rpx;
				color: #595A66;
			}
		}
	}

	.serviceView {
		display: flex;
		margin: 35rpx 30rpx 0;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;

		&__title {
			font-size: 24rpx;
			color: #595A66;
			margin-right: 30rpx;
		}

		&__details {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&__view {
				flex: 1;
				display: flex;
				align-items: center;
				gap: 30rpx;
				flex-wrap: wrap;

				&__item {
					display: flex;
					align-items: center;

					&__text {
						font-size: 24rpx;
						color: #595A66;
					}

					&__img {
						margin-right: 10rpx;
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
		}
	}

	.commentView {
		margin: 20rpx 30rpx 0;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx 20rpx 20rpx;

		&__top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			&__titie {
				font-size: 32rpx;
				color: #FFFFFF;
			}

			&__good {
				font-size: 24rpx;
				color: #595A66;
			}
		}

		&__tags {
			display: flex;
			gap: 20rpx;
			flex-wrap: wrap;
			margin-top: 20rpx;

			&__item {
				padding: 0 20rpx;
				background: #ededed;
				border-radius: 10rpx;
				height: 46rpx;
				line-height: 46rpx;
				font-size: 24rpx;
				color: #595A66;
			}
		}

		&__content {
			display: flex;
			flex-direction: column;
			width: 100%;

			&__item {
				margin-top: 40rpx;

				&__top {
					display: flex;
					align-items: center;

					&__right {
						margin-left: 10rpx;
						display: flex;
						flex-direction: column;

						&__name {
							font-size: 24rpx;
							color: #595A66;
							margin-bottom: 5rpx;
							margin-left: 5rpx;
						}
					}
				}

				&__details {
					margin: 20rpx 0;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}

			&__allbtn {
				font-size: 24rpx;
				color: #595A66;
				background: #ededed;
				border-radius: 10rpx;
				padding: 10rpx 15rpx;
				margin-top: 40rpx;
			}
		}
	}

	.recomView {
		margin: 20rpx 30rpx 30rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx 20rpx 20rpx;

		&__top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&__title {
				font-size: 32rpx;
				color: #FFFFFF;
			}

			&__switch {
				font-size: 24rpx;
				color: #595A66;
			}
		}

		&__content {
			display: flex;
			flex-wrap: wrap;
			gap: 30rpx 10rpx;
			margin-top: 20rpx;

			&__item {
				display: flex;
				flex-direction: column;
				width: 210rpx;

				&__name {
					margin-top: 10rpx;
					font-size: 20rpx;
					color: #595A66;
				}
			}
		}
	}

	.taolu {
		text-align: center;
		font-size: 28rpx;
		padding: 20rpx 0;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 20rpx 30rpx 0;
		color: #FF1835;
	}

	.shibajin {
		text-align: center;
		font-size: 24rpx;
		padding: 20rpx 0;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 20rpx 30rpx 0;
		color: #FF1835;
	}

	.placeholder {
		width: 750rpx;
		height: 160rpx;
	}

	.customerview {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 150rpx;
		text-align: center;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 50rpx 0 0;
		box-sizing: border-box;

		.iconView {
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: space-around;

			&__icon {}
		}

		.lianxikefu {
			background: linear-gradient(270deg, #FF7B3C 0%, #FF5B7C 100%);
			border-radius: 44rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin-left: 50rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>